<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>绑定对象</title>

    <style type="text/css">
        .active {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }

        .error {
            background-color: orange;
        }

        .other {
            border: 5px solid black;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 可以与普通的class共存 -->
        <!-- 绑定对象 -->
        <!-- <div v-bind:class=" tag > 0 ? ['active', 'error'] : 'error'" class="other">
            <div v-bind:class=" tag > 0 ? 'active' : 'error'" class="other"> -->
        <div v-bind:class="{active: isActive, error: isError}" class="other">
            测试样式1
        </div>
        <!-- 绑定数组 -->
        <div v-bind:class="[activeAttr,errorAttr]">
            测试样式2
        </div>
        <button @click="handle1">样式切换1</button>
        <button @click="handle2">样式切换2</button>
    </div>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true,
                isError: true,
                activeAttr: 'active',
                errorAttr: 'error'
            },
            methods: {
                handle1: function () {
                    this.isActive = !this.isActive;
                    this.isError = !this.isError;
                    this.activeAttr = '';
                    this.errorAttr = '';
                },
                handle2: function () {
                    this.isActive = !this.isActive;
                    this.isError = !this.isError;
                    this.activeAttr = 'active';
                    this.errorAttr = 'error';
                }
            }
        });
    </script>
</body>

</html>